<template>
  <div class="page">
      <ul class="top-nav" ref="nav">
          <li><router-link exact to="/" >首页</router-link></li>
          <li><router-link to="/rank" >榜单</router-link></li>
          <li><router-link to="/search" >搜索</router-link></li>
          <li><router-link to="/mine" >我的</router-link></li>
      </ul>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.page {
    background-color: #f1f1f1;
    position: fixed;
    bottom: 0;
    .audio {
        background-color: #f1f1f1;
        width: 100%;
    }
    .top-nav {
        display: flex;
        background-color: #f1f1f1;
        width: 100vw;
        height: 5vh;
        align-items: center;
        padding: 0;
        li {
            flex: 1;
            // height: 50px;
            text-decoration: none;
            text-align: center;
            list-style: none;
            a {
                display: block;
                line-height: 50px;
                height: 50px;
                text-decoration: none;
                color: #000;
            }
            .active {
                color: blueviolet;
                border-bottom: 2px solid blueviolet;
            }
            
        }
    }
}
</style>
